<template>
	<view class="page_wrapper">
		<Navbar title="查看我的试题"></Navbar>
		<view class="pagebox">
			<view class="calc_list_block">
				<view class="calc" v-for="(calc, index) in calcList" :key="index">
					{{calc.firstNum}} {{calc.firstCalcType}} {{calc.secondNum}} {{calc.secondCalcType}} {{calc.thirdNum}} = 
					<view class="resultbox">
						<span>{{calc.myResult}}</span>
						<image v-if="calc.resultFlag!='error'" class="icon" src="../../static/nimg/true.png" mode=""></image>
						<image v-else class="icon" src="../../static/nimg/error.png" mode=""></image>
					</view>
				</view>
			</view>
			<image class="showimg" src="../../static/nimg/mathshowbg.png" mode=""></image>
		</view>
		<view class="bottom_btns_block">
			<button class="fcz_btn share_exam" open-type="share">邀请答题</button>
		</view>
		<image class="page_bg_img" src="../../static/nimg/bg.png" mode=""></image>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				examId: 0,
				mathExam: {},
				calcList: []
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				let that = this
				uni.getStorage({
					key:that.examId,
					success(res) {
						uni.hideLoading()
						if(res.errMsg === "getStorage:ok"){
							that.calcList = JSON.parse(res.data)
						}else{
							uni.hideLoading()
						}
					},
					fail() {
						uni.hideLoading()
					}
				})
				this.mathExam = JSON.parse(uni.getStorageSync("test_score"))
				// request.get( 
				// 	'/mathExams/id,' + this.examId, {}
				// ).then(res => {
				// 	uni.hideLoading()
				// 	console.log(res)
				// 	this.mathExam = res
				// 	this.calcList = res.calcTwoOptLogList
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			}
		},
		
		onShareAppMessage(res) {
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
					 return {
					 	title: '我口算只用了' + this.mathExam.useTimeTxt + ',成绩是:' + this.mathExam.score + '分，你也来试试吧' ,
					 	path: '/pages/shareExam/shareExam?examId=' + this.examId,
					 	mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
					 	imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
					 }
			}
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
		onShareTimeline(res) {
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper {
		.pagebox {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 4;
			top: 160rpx;
			overflow: hidden;
			height: calc(100% - 400rpx);
		}
		.icon{
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			top: 24rpx;
			left: 0;
		}
		.calc_list_block {
			flex: 1;
			z-index: 5;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-content: flex-start;
			overflow: scroll;
			justify-content: center;
			font-size: 30rpx;
			color: #074F1E;
			row-gap: 34rpx;
			column-gap: 20rpx;
			margin: 50rpx 0rpx 120rpx 0rpx;
			padding: 0 20rpx;
			.calc {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.resultbox{
				position: relative;
			}
		}

		.showimg {
			position: absolute;
			width: calc(100% - 40rpx);
			padding: 20rpx;
			height: 100%;
			margin: 0 auto;
			left: 0;
			right: 0;
		}

		.bottom_btns_block {
			position: fixed;
			bottom: 80rpx;
			z-index: 4;
			display: block;

			.fcz_btn {
				height: 98rpx;
				color: white;
				font-size: 40rpx;
				background-color: #2E996C;
				border-radius: 50rpx;
			}

			.online_btn {
				flex: 1;
				margin: 0 auto;
			}

			.download_btn {
				flex: 1;
			}
		}
	}
</style>
